<template>
  <div class="limited-deals" ref="limitedDeals">
    <common
      :data="limitedDealss"
      :ProductLoading="ProductLoading"
      :mainData="limitedDealsTop"
      ref="common"
      :title="limitedDeal"
      :totalPages="totalPages"
      @changedSort="getSortCondition"
      @changePrice="getSortPrice"
      @select="selectLimited"
      @changePage="changePages"
      @selectSku="selectSku"
      @selectCategory="selectCategory"
      @selectSecondCategory="selectSecondCategory"
      @selectThreeCategory="selectThreeCategory"
    >
    </common>
    <router-view></router-view>
  </div>
</template>
<script>
  import {ERR_OK} from 'api/config'
  import {mapMutations, mapGetters} from 'vuex'
  import {limitedDealsListCommodity, limitedDealsTop} from 'api/limited-deals'
  import {getCategory} from 'common/js/dom'
  import common from "components/common/common";
  import monitoring from '../../common/js/monitoring';

  export default {
    computed: {
      ...mapGetters([
        'categories'
      ])
    },
    data() {
      return {
        limitedDealss: [],
        limitedDealsTop: {},
        PageNumber: 1,
        limitedDeal: 'Limited Deal',
        val: 'ShelfTimeNewToOld',
        categoryId: '',
        price: {
          min: 1,
          max: 999
        },
        totalPages: 0,
        ProductLoading: false,
        NoProduct: false,
        ExcludedSkus: '',   //置顶产品sku
      }
    },
    created() {
      this.setFocus(-1)
      this.setCategoryName('')
      monitoring.openLimitedDeals();//todo Facebook Pixel & Google Analytic Code    openLimitedDeals
      this.setClass('')
      this._limitedDealsTop()
    },
    methods: {
      selectLimited(item) {
        this.$router.push({
          path: `/limited-deals/${item.urlKeyWords}/${item.sku}`
        })
        this.setDisc(item)
      },
      selectSku(item) {
        this.$router.push({
          path: `/limited-deals/${item.urlKeyWords}/${item.sku}`
        })
        this.setDisc(item)
      },
      selectCategory(item) {
        let nameAry = item.name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let name = nameAry.join('-')
        this.$router.push({
          path: `/limited-deals?category=${name}`
        })
        this.setFocus(1)
      },
      selectSecondCategory(itemSecond) {
        let nameAry = itemSecond.name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let name = nameAry.join('-')
        this.$router.push({
          path: `/limited-deals?category=${name}`
        })
        this.setFocus(2)
      },
      selectThreeCategory(itemSecond, itemThree) {
        let nameAry = itemThree.name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let name = nameAry.join('-')
        this.$router.push({
          path: `/limited-deals?category=${name}`
        })
        this.setFocus(3)
      },
      changePages(num) {
        this.ProductLoading = true
        this.limitedDealss = []
        limitedDealsListCommodity(num, this.val, this.price.min, this.price.max, this.categories.categoryId, this.ExcludedSkus).then((res) => {
          this.limitedDealss = res.data
          this.totalPages = res.totalPages
          this.ProductLoading = false
        })
      },
      getSortCondition(val) {
        this.val = val
      },
      getSortPrice(min, max) {
        this.price.min = min
        this.price.max = max
      },
      _limitedDealsTop() {
        if(this.$route.query.page) {
          this.PageNumber = this.$route.query.page
        }else {
          this.PageNumber = 1
        }
        limitedDealsTop(this.PageNumber).then((res) => {
          if (res.data[0] !== undefined) {
            this.limitedDealsTop = res.data[0]
            this.ProductLoading = true
            this.ExcludedSkus = res.data[0].sku
          }
          return limitedDealsListCommodity(this.PageNumber, this.val, this.price.min, this.price.max, this.categories.categoryId, this.ExcludedSkus)
        })
          .then((res) => {
            this.limitedDealss = res.data
            this.totalPages = res.totalPages
            this.ProductLoading = false
          })
      },
      ...mapMutations({
        setDisc: 'SET_FEATURED_LIST',
        setClass: 'SET_CATEGORIES',
        setFocus: 'SET_CATEGORY_FOCUS',
        setCategoryName: 'SET_CATEGORY_NAME'
      })
    },
    watch: {
      val: {
        handler() {
          this._limitedDealsTop()
        },
        deep: true
      },
      price: {
        handler() {
          this._limitedDealsTop()
        },
        deep: true
      },
      categories: {
        handler() {
          this._limitedDealsTop()
        },
        deep: true
      },
    },
    components: {
      common
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .limited-deals
    background #fff
    margin auto
</style>
